<template>
  <div class="add">
    <BaseDialog
      :title="$t('订舱确定')"
      width="1000px"
      height="600px"
      bodyClass="add-bas"
      v-model:visible="innerVisible"
      :renderDefaultFooter="false"
    >
      <MyForm
        v-model:formData="formData"
        v-model:columns="formColumns"
        :rules="rules"
        :labelWidth="90"
        :saveBtnLoading="saveBtnLoading"
        background="#fff"
        @submit="onSubmit"
        @cancel="innerVisible = false"
      >
      </MyForm>
    </BaseDialog>
  </div>
</template>
<script setup lang="tsx">
import { ref, computed, onMounted } from "vue";
import * as api from "@/api/index.js";
import { ElMessage } from "element-plus";
import { getSubZhEn, columnFilters } from "@/utils/mUtils.js";
const props = defineProps({
  visible: {
    type: Boolean,
  },
  curRow: {
    type: Object,
    default: () => {},
  },
});
const emits = defineEmits(["update:visible", "onSubmit"]);
const innerVisible = computed({
  get() {
    return props.visible;
  },
  set(val) {
    emits("update:visible", val);
  },
});
const formData = ref({
  attachFileIdList: [],
  detailsList: [],
});
const rules = ref({
  soNo: [
    {
      required: true,
    },
  ],
});
const formColumns = ref([
  {
    title: "",
    structure: [
      {
        formLayout: "el-row-column",
        content: [
          {
            type: "el_column_list",
            prop: "detailsList",
            restriction: "containerNumber",
            buttonAdd: true,
            labelRow: "SO信息",
            span: 24,
            labelKey: [
              "soNo",
              "masterBillOfLading",
              "remark",
              "costAmount",
              "costCurrency",
            ],
            content: [
              {
                label: "SO号",
                prop: "soNo",
                type: "label_input",
                maxlength: 20,
                xl: 8,
                rules: [
                  {
                    required: true,
                  },
                ],
              },
              {
                label: "MBL",
                prop: "masterBillOfLading",
                type: "label_input",
                maxlength: 20,
                xl: 8,
              },
              {
                label: "SO附件",
                prop: "attachFileIdList",
                type: "label_upload",
                listKey: "original",
                sourceNo: "soNo",
                props: {
                  label: "original",
                  busTypeCode: "015003",
                  busTypeName: "订舱资料",
                  limit: 1,
                },
                span: 24,
              },
              {
                label: "舱位备注",
                prop: "remark",
                type: "label_input",
                inputType: "textarea",
                maxLength: 255,
                span: 24,
              },
            ],
          },
        ],
      },
    ],
  },
]);

const saveBtnLoading = ref(false);
onMounted(() => {
  if (props.curRow.id) {
    getInfo();
  }
});
const getInfo = async () => {
  saveBtnLoading.value = true;
  try {
    const { data } = await api.default.oceanFreight.bookingManagement.getInfo(
      props.curRow.id
    );
    formData.value = {
      ...data,
      detailsList: data.detailsList.length ? data.detailsList : [{}],
    };
    saveBtnLoading.value = false;
  } catch (err) {
    saveBtnLoading.value = false;
  }
};
const onSubmit = () => {
  const detailsList = formData.value.detailsList.map((item) => {
    return {
      ...item,
      bookingId: props.curRow.id,
    };
  });
  saveBtnLoading.value = true;
  api.default.oceanFreight.bookingManagement
    .batchSaveOrUpdate(detailsList)
    .then(() => {
      ElMessage.success("订舱成功");
      innerVisible.value = false;
      saveBtnLoading.value = false;
      emits("onSubmit");
    })
    .catch(() => {
      saveBtnLoading.value = false;
    });
};
</script>
<style lang="scss" scoped>
.search-btn {
  width: 120px;
  margin: 20px auto 0;
}

:deep() .default-slot {
  height: 555px !important;
}
</style>
